<template>
  <div class="bookclassify">
    <!-- 图书分类 -->
    <header>
      <div class="h-left">
        <router-link to="/classify"
          ><img src="../../assets/image/18721.png" style="width: 8px"
        /></router-link>
      </div>
      <div class="h-title" >推荐</div>
      <!-- <div class="h-title" v-if="title">{{title.label}}</div> -->
      <div class="h-right">
        <router-link to="/home" class="book" style="margin-right: 10px"
          >首页</router-link
        >
      </div>
    </header>
    <van-tabs v-model="active">
      <van-tab v-for="(item, index) in Latestitle" :key="index" :title="item">
        <contentlist></contentlist>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import contentlist from "../../components/classification/ContentList.vue";
import { getFictionApi } from "../../api/novelmain.js";
export default {
  data() {
    return {
      active: 0,
      Latestitle: null,
      title:""
    };
  },
  methods: {
    getFictionApiFun() {
      getFictionApi().then((data) => {
        this.Latestitle = data.Latestitle;
        console.log(this.Latestitle);


        this.title = data.fiction
        console.log(this.title);

      });
    },
  },
  created() {
    this.getFictionApiFun();
  },
  components: {
    contentlist,
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .van-tab--active {
    color: #f54b41;
  }
  .van-tabs__line {
    // display: none;
    width: 50%;
    // bottom: 20px;
  }
  .van-tab__text {
    font-size: 15px;
  }
  .van-tabs__wrap {
    border-bottom: 1px solid #dedede;
  }
}
</style>